<template>
  <div>
    <!-- 自定义导航 -->
    <van-nav-bar :title="navName" left-text="取消" right-text="保存" left-arrow @click-left="cancel" @click-right="save" :fixed="true"/>
    <van-cell-group style="padding-top:51px">
      <van-field v-model="from.name" label="楼层名称" placeholder="请输入" clearable required :error="checkVal.nameErr" @focus="checkVal.nameErr=false" input-align="right"/>
      <!-- <van-field v-model="from.area" type="number" label="总面积" placeholder="请输入" clearable required :error="checkVal.areaErr" @focus="checkVal.areaErr=false" input-align="right"/> -->
      <van-field v-model="from.area" type="number" label="总面积" placeholder="请输入" clearable input-align="right"/>
      <van-field type="number" v-model="from.outerarea" label="室外面积" placeholder="请输入" clearable input-align="right"/>
      <van-field type="number" v-model="from.innerarea" label="室内面积" placeholder="请输入" clearable input-align="right"/>
      <van-field type="text" v-model="from.level" label="楼层" placeholder="请输入" clearable required :error="checkVal.levelErr" @focus="checkVal.levelErr=false" input-align="right" :formatter="formatter"/>
      <van-cell title="请选择楼层类别" is-link :value="from.floorName" @click="floorClass=true" :required="true" :title-class="floorErr"/>
      <!-- 楼层类别 弹层 -->
    <van-action-sheet v-model="floorClass" :actions="actions" @select="floorSelect"/>

    <van-cell-group>
      <van-switch-cell v-model="from.isMaintained" :class="openstyles1" title="是否启需要维护" @change="changecolor1" active-value="1" inactive-value="0" active-color="#13ce66"/>
    </van-cell-group>
    <van-field type="textarea" v-model="from.description" label="描述" placeholder="请输入" clearable :maxlength="140" show-word-limit autosize/>
    </van-cell-group>
    <van-cell-group>
      <van-switch-cell v-model="from.status" :class="openstyles2" title="是否启用该楼层" @change="changecolor2" active-value="1" inactive-value="2" :disabled="isStatus" active-color="#13ce66"/>
    </van-cell-group>
  </div>
</template>
<script>
  export default {
  data(){
    return{ 
      sty: 'default', //楼层类别动态样式
      isStatus: false, //是否启用
      //错误检查
      checkVal:{
        nameErr: false,
        // areaErr: false,
        levelErr: false,
        floorNameErr: true,
      }, 
      floorErr: 'default',  //空间类型 为空样式
      navName: localStorage.getItem('navName'), //导航名称
      floorClass: false,  //楼层类别 弹层变量
      actions: [
        // { id: '0', subname: '描述信息1' },
      ],
      openstyles1:'', 
      openstyles2:'', 
      from:{
        name:'',          //楼层名称
        area:'',          //总面积 Number
        outerarea: '',     //外部面积 Number
        innerarea: '',     //内部面积 Number
        level: null,         //楼层 Number
        floorClassId:'',  //楼层类别
        floorName:'',     //楼层名称
        isMaintained: '1',   //是否需要服务  1-启用 0-停用
        description:'',   //描述
        status: '1',        //1-启用 2-停用
      },
    }
  },
  methods:{
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/^[\u0391-\uFFE5A-Za-z.]+$/, '');
    },
    //选择楼层类别
    floorSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.floorClass = false;
      this.floorErr = "default";
      this.from.floorName = item.subname;  //选中的楼层类别名（赋值）
      this.from.floorClassId = item.id;
    },
     //楼层类别数据获取
    getbulidingsClsaa(){
      this.$http.get(`/api/constants/getConstantsList?classfication=floorClass&status=1`,{
      headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.length == 0 ){
            this.floorClass = false;
            this.$toast.fail("楼层类别为空");
            return;
          }
          this.actions = [];
           for (let index = 0; index < res.data.data.length; index++) {
            this.actions.push(
              {
                id: res.data.data[index].id,
                subname: res.data.data[index].name,
                classfication: res.data.data[index].classfication 
            });
           }
        }
       
      })
    },
    //取消按钮
    cancel() {
     this.$router.go(-1);//返回上一层
    },
    //保存按钮
    save() {
      if(!this.from.name){
        this.checkVal.nameErr = true;
        return this.$toast("楼层名称不能为空！");
      }
      // if(!this.from.area){
      //   this.checkVal.areaErr = true;
      //   return this.$toast("总面积不能为空！");
      // }
      if(!this.from.level){
        this.checkVal.levelErr = true;
        return this.$toast("楼层不能为空！");
      }
      if(!this.from.floorClassId){
        this.floorErr = 'floorSty';
        return this.$toast("楼层类别不能为空！");
      }
      let data = {
        buildingId:sessionStorage.getItem('buildID'),
        name: this.from.name,
        area: parseFloat(this.from.area),
        outerarea: parseFloat(this.from.outerarea),
        innerarea: parseFloat(this.from.innerarea),
        level: parseInt(this.from.level),
        floorClassId: this.from.floorClassId,
        isMaintained: parseInt(this.from.isMaintained),
        description: this.from.description,
        status: parseInt(this.from.status),
      }
      this.$http.post("/api/floors/createFloors", data, {
      headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == -3){
          this.nameErr = true;
          this.$toast.fail("添加失败，楼层名重复");
          return;
        }
        if(res.data.errcode == 0){
          this.from = {};
          this.$toast.success('楼层添加成功!');
          this.$router.replace({path: '/floor'})
        }
      })
    },
    // 开关改变颜色
    changecolor1(){
      if(this.from.isMaintained == true){
        this.openstyles1='open';
      }else{
        this.openstyles1='';
      }
    },

    changecolor2(){
      if(this.from.status == 1){
        this.openstyles2='open';
      }else{
        this.openstyles2='';
      }
    },
    //判断父级建筑是否启用 父级未启用 子级不可启用
    
    getIsStatus(){
      let buildID = sessionStorage.getItem('buildID');
      this.$http({
        url: "/api/buildings/getBuildingsById",
        method: "get",
        params: {
          id: buildID,
        },
        headers:{Authorization: localStorage.getItem("token")}
      }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.status==2){
            this.isStatus = true;
            this.from.status = 2;
          }
        }
      }).catch(err =>{
        console.log({err});
      })
    }
  },
  created(){
    this.getbulidingsClsaa();
    this.getIsStatus();
  }
}

</script>

<style scoped>
  .van-cell {
    color: #979797 !important;
  }
  /* 开关选择颜色 */
  .open{
    color: #333 !important;
  }

  /* 楼层类别动态样式 */
  .floorSty{
    color:red;
  }
  .default{
    color: #4C4C4C;
  }
</style>